<template>
  <div class="app-container banner_page">
    <div v-if="!showEdit" style="padding: 10px;background: #fff;">
      <el-row style="background: #fff;">
        <el-col :span="22">
          <el-button type="primary" @click="showEditpage('')">新增</el-button>
          <el-button @click="opBannerStatus(1)">上架</el-button>
          <el-button @click="opBannerStatus(2)">下架</el-button>
          <el-button @click="delBanner">删除</el-button>
        </el-col>
        <el-col :span="2">
          <div class="total_bar">
            <span>共{{ tableData.length }}条</span>
          </div>
        </el-col>

      </el-row>
      <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          label="主图"
          width="80"
        >
          <template slot-scope="scope">
            <img class="tab_img" :src="scope.row.img" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            {{ statusTxt[+scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sorttime"
          label="排序"
          show-overflow-tooltip
        />
        <el-table-column
          prop="username"
          label="编辑人"
          show-overflow-tooltip
        />
        <el-table-column
          prop="updatetime"
          label="最后编辑时间"
          show-overflow-tooltip
        />
        <!-- <el-table-column
					prop="commodityid"
					label="编辑人"
					show-overflow-tooltip>
				</el-table-column> -->
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEditpage(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="opBannerSort(scope.row)">置顶</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <edit :editdata="addData" class="edit" />
    </div>

  </div>
</template>

<script>
import edit from './edit'
import { bannerIndex, opBannerSort, opBannerStatus, delBanner } from '@/api/banner'
export default {
  components: {
    edit
  },
  data() {
    return {
      showEdit: false,
      tableData: [],
      multipleSelection: [],
      addData: '',

      total: 1,
      count: 1,
      statusTxt: [ '待定', '已上架', '已下架' ]
    }
  },
  watch: {
    '$route'(val) {
      console.log('val', val)
      this.switchEdit()
    }
  },
  created() {
    this.getData()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.switchEdit()
    })
  },
  methods: {
    switchEdit() {
      const queryData = this.$route.query
      if (queryData) {
        console.log('queryData', queryData)
        this.showEdit = queryData.showEdit || false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    showEditpage(data) {
      this.showEdit = true
      this.addData = data
      this.$router.push('/banner/banner?showEdit=true') // 清除query data
    },
    closeEditpage() {
      this.showEdit = false
    },
    getData() {
      bannerIndex({ frames: 1 }).then(res => {
        this.tableData = res.detail.data
        // 				this.count = Number(res.detail.data.count);
        // 				this.total = Number(res.detail.data.total);
      })
    },
    opBannerSort(data) {
      const self = this
      opBannerSort({
        bannerid: data.id
      }).then(response => {
        self.$message({
          message: '操作成功',
          type: 'success'
        })
        self.getData()
      })
    },
    opBannerStatus(status) {
      const self = this
      if(this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请先选择主图'
        })
        return
      }
      const bannerid = []
      self.multipleSelection.forEach(row => {
        bannerid.push(row.id)
      })

      opBannerStatus({
        bannerid: bannerid.toString(),
        status: status
      }).then(response => {
        self.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.multipleTable.clearSelection()
        self.tableData.forEach(row => {
          bannerid.forEach(id => {
            row.id === id ? row.status = status : row.status
          })
        })
      })
    },
    delBanner() {
      const self = this
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请先选择主图'
        })
        return
      }
      this.$confirm('此操作将删除该主图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const bannerid = []
        self.multipleSelection.forEach(row => {
          	bannerid.push(row.id)
        })
        delBanner({
          		bannerid: bannerid.toString()
          	}).then(response => {
          	self.$message({
          		message: '操作成功',
          		type: 'success'
          	})
          	this.$refs.multipleTable.clearSelection()
          bannerid.forEach(id => {
            // row.id==id ? row.status = status : row.status;
            self.tableData = self.tableData.filter(function(row) {
              return row.id !== id
            })
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style scoped>
.banner_page{
	position: relative;

}
.total_bar{
		height: 40px;
		line-height: 40px;
	}
	.tab_img{
		width: 20px;
		height: 20px;
	}

</style>

